<template>
	<view class="content">
		<uni-nav-bar height="150rpx" class="uni-nav-bar" left-icon="left" :border="false" title="搜索" @clickLeft="navBarClick"> </uni-nav-bar>
		<view class="search-input">
			<view class="text-area">
				<bm-search-input :isHistory="true" :lists_title="search_result_title" :lists_note="search_result_note"
					:input_length="my_input_length" :lists="suggestion_lists" @parent_get_lists="get_selected_lists"
					@parent_search="finish_search"></bm-search-input>
			</view>
		</view>
	</view>
</template>

<script>
	import bmSearchInput from '@/components/bm-searchInput/bm-searchInput'
	export default {
		data() {
			return {
				//搜索结果中的标题
				search_result_title: [],
				//搜索结果中的备注(不需要可以删掉)
				search_result_note: [],
				// 搜索建议列表
				suggestion_lists: [],
				// 自定义搜索框长度
				my_input_length: "400rpx"
			}
		},
		components: {
			bmSearchInput
		},
		methods: {
			get_selected_lists(input_content) {
				console.log("用户输入了", input_content); // 用户输入的内容
				// eslint-disable-next-line no-console
				//发送请求，获取建议列表
				// uni.request({
				// 	url: 'http://localhost:3000/List?RoomName_like=' + input_content, // 这里以本地资源demo.json为例
				// 	method: "GET",
				// 	header: {
				// 		'content-type': "application/x-www-form-urlencoded"
				// 	},
				// 	success: (res) => {
				// 		// console.log("res",res);
				// 		this.suggestion_lists = res.data; // 将值传递给子组件
				// 	}
				// });
			},
			finish_search(input_content) {
				console.log("用户要搜索", input_content);
				//搜索框显示完成，页面展示搜索结果
				//这里写入你之后想要运行的程序
			},
			navBarClick(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	//自定义uni-nav-bar导航栏标题样式
	/deep/ .uni-nav-bar .uni-nav-bar-text {
		font-size: 40rpx !important;
		color: black !important;
		font-weight: bold;

	}

	.search-input {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: center;
		// align-items: center;
		margin-top: 20upx;

		.logo {
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
		}

		.text-area {
			width: 95%;
			height: 150rpx;
			padding: 30rpx;
		}
	}
</style>